<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

	<title>Ejemplo</title>

	<!-- Se cargaran los archivos desde las carpeta de atras. -->
	<link rel="stylesheet" type="text/css" href="../ejemplos.css"/>
	<script type="text/javascript" src="../../../js/lib.js"></script>
	<script type="text/javascript" src="../../../js/ajax.js"></script>
	<script type="text/javascript" src="../../../js/asyncform.js"></script>
	<script type="text/javascript" src="../../../js/rin-latest.js"></script>
</head>

<body>

	<h1>Ejemplo #5</h1>

	<!-- Formulario para agregar una persona. -->
	<form id="formAgregar" action="personas.php">
		<input type="hidden" name="operacion" value="agregar"/>
		<input type="text" name="nombre" placeholder="Nombre"/>
		<input type="text" name="apellido" placeholder="Apellido"/>
		<input type="submit" value="Agregar"/>
		<div class="message error"></div>
	</form>

	<br/>
	<button onclick="borrarTodo()">Borrar Todo</button>
	<br/>

	<!-- Formulario para editar una persona, se encuentra no-visible al inicio. -->
	<form class="hidden" id="formEditar" action="personas.php">
		<br/>
		<input type="hidden" name="operacion" value="guardar_cambios"/>
		<input type="hidden" name="codigo" value=""/>
		<input type="text" name="nombre" placeholder="Nombre"/>
		<input type="text" name="apellido" placeholder="Apellido"/>
		<input type="submit" value="Guardar Cambios"/>
		<input onclick="cancelarEditar()" type="button" value="Cancelar"/>
		<div class="message error"></div>
	</form>

	<br/>

	<!-- Datos a mostrar usando plantillas. -->
	<div class="table" data-content="html" data-model="modeloLocal" data-observe="lista">
		[[#if lista_vacia]]
			<div class="header">
				<span>No hay datos que mostrar.</span>
			</div>
		[[:else]]
			<div class="header">
				<span>#</span>
				<span>Nombre</span>
				<span>Apellido</span>
				<span>Operación</span>
			</div>

			[[#each lista]]
				<div>
					<span>[[codigo]]</span>
					<span>[[nombre]]</span>
					<span>[[apellido]]</span>
					<span>
						<button onclick="borrar('[[codigo]]');">Borrar</button>
						<button onclick="editar('[[codigo]]');">Editar</button>
					</span>
				</div>
			[[/each]]
		[[/if]]
	</div>

	<script>
		var modeloLocal = new Rin.Model ({ lista: [ ] });

		// ---------
		function borrar(codigo)
		{
			Ajax.request ("personas.php", { operacion: "borrar", codigo: codigo }, function (r)
			{
				cargarLista();
			});
		}

		// ---------
		function cancelarEditar()
		{
			$("#formEditar").hide();
		}

		// ---------
		function editar(codigo)
		{
			var lista = modeloLocal.get("lista");
			
			for (var i = 0; i < lista.length; i++)
			{
				if (lista[i].codigo == codigo)
				{
					formEditar.setFieldValues(lista[i]);
					$("#formEditar").show();
					break;
				}
			}
		}

		// ---------
		function borrarTodo()
		{
			Ajax.request ("personas.php", { operacion: "borrar_todo" }, function (r)
			{
				cargarLista();
			});
		}

		// ---------
		function cargarLista()
		{
			Ajax.request ("personas.php", { operacion: "lista" }, function (r)
			{
				modeloLocal.set ("lista_vacia", r.datos.length == 0 ? 1 : 0);
				modeloLocal.set ("lista", r.datos);
			});
		}

		// Configurar el formulario de agregar persona.
		var formAgregar = new AsyncForm ($("#formAgregar"));
		formAgregar.onFormSubmitted = function ()
		{
			cargarLista();
			formAgregar.setFieldValues(null);
		}

		// Configurar el formulario de editar persona.
		var formEditar = new AsyncForm ($("#formEditar"));
		formEditar.onFormSubmitted = function ()
		{
			$("#formEditar").hide();
			cargarLista();
		}

		// --------------
		function main ()
		{
			cargarLista();
			$("#formEditar").hide();
		}

	</script>

</body>

</html>
